<!-- 统计卡片 -->
<template>
    <el-row :gutter="24" style="height: 300px;">
      <el-col :lg="8" :md="24" style="padding-left: 6px;padding-right: 1px;height: 300px;">
        <el-card class="analysis-chart-card" shadow="never" style="height: 300px;">
          <template v-slot:header>
            <div class="ele-cell" style="font-size: 16px;height: 18px;">
              <div class="ele-cell-content">订单统计</div>
              <div :class="['ele-inline-block', { 'hidden-xs-only': true }]">
                <el-radio-group v-model="where.saledateEnum" size="small" @input="(v)=>initSaleTime(v,true)">
                  <el-radio-button :label="1">今日</el-radio-button>
                  <el-radio-button :label="2">本月</el-radio-button>
                  <el-radio-button :label="3">本年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div style="display: flex;width: 100%;height: 100px;flex-direction: column;">
            <div class="ele-cell-content" style="color: #687284;font-size: 13px;" ><span>销售订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量：{{ saleorder.val }} 单</span></div>
            <div class="analysis-chart-card-content" >
              <v-chart
                ref="saleorderChart"
                style="height: 60px;"
                :option="HomeSaleOrderChartOption"
              />
              </div>
              <br>
            <div  class="ele-cell-content" style="color: #687284;font-size: 13px;"><span>销售出库单 &nbsp;&nbsp;&nbsp;&nbsp;数量：{{ saleoutorder.val }} 单</span></div>
            <div class="analysis-chart-card-content" >
              <v-chart
                ref="saleoutorderChart"
                style="height: 60px;"
                :option="HomeSaleOutOrderChartOption"
              />
              </div>
          </div>
          <div class="analysis-chart-card-content">
        </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" style="padding-left: 3px;padding-right: 1px;height: 300px;">
        <el-card class="analysis-chart-card" shadow="never" style="height: 300px;">
          <template v-slot:header>
            <div class="ele-cell" style="font-size: 16px;height: 18px;">
              <div class="ele-cell-content">销售出库应收统计</div>
              <div :class="['ele-inline-block', { 'hidden-xs-only': true }]">
                <el-radio-group v-model="where.saleoutdateEnum" size="small"  @input="(v)=>initSaleOutTime(v,true)">
                  <el-radio-button :label="1">今日</el-radio-button>
                  <el-radio-button :label="2">本月</el-radio-button>
                  <el-radio-button :label="3">本年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div style="margin-top: -35px;" >
          <v-chart
            ref="SaleOrderParChart"
            style="height: 280px;"
            :option="HomeSaleOrderParChartOption"
          />
        </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" style="padding-left: 3px;padding-right: 3px;height: 300px;">
        <el-card class="analysis-chart-card" shadow="never" style="height: 300px;">
          <template v-slot:header>
            <div class="ele-cell" style="font-size: 16px;height: 18px;">
              <div class="mui-icon iconfont iconfengxian hang_color" style=" margin-left: 8px;font-size: 14px;"></div>
              <div class="iconfont" style="font-size: 16px; margin-left: 2px;float: right;">销售订单交货提醒</div>
            </div>
          </template>
          <div class="analysis-chart-card-num ele-text-heading" ></div>
          <div class="analysis-chart-card-content">
            <dv-scroll-board id="centerrightChart" :config="config" style="width: 100%;height:280px;" @click="saleorderclick" />
        </div>
        </el-card>
      </el-col>
    </el-row>
  </template>
  
  <script>
    // import { use } from 'echarts/core';
    import VChart from 'vue-echarts';
    import { removePageTab } from '@/utils/page-tab-util';
    import { QueryOrderStatisticsView,QuerySaleOutOrderProportionStatisticsView,QuerySaleDeliveryRemindStatisticsView } from '@/api/home'
  
    export default {
      name: 'HeaderCard',
      props:{
        whereParams:Object
      },
      components: { VChart },
      data() {
        return {
          where:{saledateEnum:'2',saleoutdateEnum:'2'},
          saleorder:{val:18,val1:6,val2:12},
          saleoutorder:{val:22,val1:10,val2:12},
          outorderproportion:[12, 32, 54],
          // 访问量折线图配置
          HomeSaleOrderChartOption:{},
          HomeSaleOrderParChartOption:{},
          HomeSaleOutOrderChartOption:{},
          config: { 
            header:[],
            data:[
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
              // ['<span style="font-size:13px;color:#687284;cursor:pointer">XS240700020(业务员)</span>','<span style="font-size:13px;color:#687284">距离交货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            ],
            rowNum:6,
            headerBGC: 'transparent', // 表头背景色
            oddRowBGC: 'transparent', // 奇数行背景色
            evenRowBGC: 'transparent', // 偶数行背景色
            columnWidth: [240,150],
            align: ['center','center']
          },
        };
      },
      created(){
        
      },
      activated(){
        this.initSaleTime('2',true);
        this.initSaleOutTime('2',true);
        this.reloadQuerySaleDeliveryRemind();
      },
      methods: {
        reloadQueryOrderStatisticsView(){

          var query = {dateType:'year'};
          if(this.where.saledateEnum == '1') query.dateType ='day';
          if(this.where.saledateEnum == '2') query.dateType ='month';
          if(this.where.saledateEnum == '3') query.dateType ='year';

          QueryOrderStatisticsView(query).then((res)=>{
            if(res?.length>0){
              let so = res.find((f)=>{
                return f.type == 1;
              });
              let sor = res.find((f)=>{
                return f.type == 2;
              });

              if(so){ this.saleorder =so;}
              if(sor){ this.saleoutorder =sor; }
            }
           
            this.drawHomeSaleOrderChart();
            this.drawHomeSaleOutOrderChart();
          })
        },

        reloadQuerySaleOutOrderProportion(){
          var querysaleout = {dateType:'month'};
          if(this.where.saleoutdateEnum == '1') querysaleout.dateType ='day';
          if(this.where.saleoutdateEnum == '2') querysaleout.dateType ='month';
          if(this.where.saleoutdateEnum == '3') querysaleout.dateType ='year';

           QuerySaleOutOrderProportionStatisticsView(querysaleout).then((res)=>{
            this.outorderproportion = [];
            if(res?.length>0){
              let p1 = res.find((f)=>{
                return f.type == 1;
              });
              let p2 = res.find((f)=>{
                return f.type == 2;
              });
             if(p1) this.outorderproportion[0] = p1.amount;
             if(p2) this.outorderproportion[1] = p2.amount;
            }
           
            this.drawHomeSaleOutPreOrderChart();
          })
        },

        reloadQuerySaleDeliveryRemind(){
          QuerySaleDeliveryRemindStatisticsView().then((res)=>{

            if(res && res.length>0){
              let array = [];
              res.map((item)=>{
                  let blist =[
                    `<span style="font-size:13px;color:#687284;cursor:pointer">${item.orderno}(${item.cust})</span>`,
                    `<span style="font-size:13px;color:#687284;cursor:pointer">距离交货日期还剩</span><span style="font-size:13px;color:red;cursor:pointer">${item.d}</span><span style="font-size:13px;color:#687284">天</span>`
                  ];
                  array.push(blist);
              });
              this.config.data =[];
              this.config ={
                rowNum:6,
                headerBGC: 'transparent', // 表头背景色
                oddRowBGC: 'transparent', // 奇数行背景色
                evenRowBGC: 'transparent', // 偶数行背景色
                columnWidth: [240,150],
                align: ['center'],
                data:array
              } ;
            }
          });
        },

        //选中日、月、年后格式化时间
        initSaleTime(timeId, flag) {
          this.where.saledateEnum = timeId;

          if (flag) {
            this.reloadQueryOrderStatisticsView();
          }
        },

        //选中日、月、年后格式化时间
        initSaleOutTime(timeId, flag) {
          this.where.saleoutdateEnum = timeId;
          if (flag) {
            this.reloadQuerySaleOutOrderProportion();
          }
        },

        drawHomeSaleOrderChart(){

          var val1array = [];
          var val2array = [];
          val1array.push(this.saleorder.val1);
          val2array.push(this.saleorder.val2);
          this.HomeSaleOrderChartOption = {
            legend: {
                show: true,
                top: '60%',
                // bottom: '10%',
                left: 'center',
                textStyle: {
                  fontSize: 12,
                },
                formatter: (params) => {
                  return params
                }
            },
            grid:{
              top:'10%',
              height:'30px'
            },

            
            // color: ['#fc874b', '#fad336'],
            color: ['rgb(51,191,254)', 'rgb(29,216,170)'],
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0,0]
            },
            yAxis: [
              {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: [{
                    show: false
                }]
              }
            ],
            series: [
                {
                  type: 'bar',
                  name: '已收款转出库',
                  stack: '总量',
                  barWidth: 20,
                  label: {
                      show: true,
                      position: 'inside',
                      color: "#fff",
                      formatter: '{c}'
                  },
                  showBackground: true,
                  backgroundStyle: {
                      color: 'rgb(29,216,170)',
                      borderRadius: 10,
                  },
                  itemStyle: {
                      barBorderRadius: [10, 10, 10, 10]
                  },
                  data: val1array
                },
                {
                  type: 'bar',
                  name: '已出库',
                  stack: '总量',
                  barWidth: 20,
                  label: {
                      show: true,
                      color: "#fff",
                      position: 'inside',
                      formatter: '{c}'
                  },
                  showBackground: true,
                  backgroundStyle: {
                      color: 'transparent',
                      barBorderRadius: [10, 10, 10, 10],
                  },
                  itemStyle: {
                      color: 'rgb(29,216,170)',
                      barBorderRadius: [10, 10, 10, 10],
                  },
                  silent: true,
                  data: val2array
                },
            ]
          };
        
        },

        drawHomeSaleOutOrderChart(){
          var val1array = [];
          var val2array = [];
          val1array.push(this.saleoutorder.val1);
          val2array.push(this.saleoutorder.val2);
          this.HomeSaleOutOrderChartOption = {
            legend: {
              show: true,
              top: '60%',
              // bottom: '10%',
              left: 'center',
              textStyle: {
                fontSize: 12,
              },
              formatter: (params) => {
                return params
              }
            },
            grid:{
              top:'10%',
              height:'30px'
            },
            color: ['rgb(51,191,254)', 'rgb(29,216,170)'],
            xAxis: {
              show: false,
              type: 'value',
              boundaryGap: [0, 0]
            },
            yAxis: [
              {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: [{
                    show: false
                }]
              }
            ],
            series: [
                {
                  type: 'bar',
                  name: '未出库',
                  stack: '总量',
                  barWidth: 20,
                  label: {
                      show: true,
                      position: 'inside',
                      color: "#fff",
                      formatter: '{c}'
                  },
                  showBackground: true,
                  backgroundStyle: {
                      color: 'rgb(29,216,170)',
                      borderRadius: 10,
                  },
                  itemStyle: {
                      barBorderRadius: [10, 10, 10, 10]
                  },
                  data: val1array
                },
                {
                  type: 'bar',
                  name: '已出库',
                  stack: '总量',
                  barWidth: 20,
                  label: {
                      show: true,
                      color: "#fff",
                      position: 'inside',
                      formatter: '{c}'
                  },
                  showBackground: true,
                  backgroundStyle: {
                      color: 'transparent',
                      barBorderRadius: [10, 10, 10, 10],
                  },
                  itemStyle: {
                      color: 'rgb(29,216,170)',
                      barBorderRadius: [10, 10, 10, 10],
                  },
                  silent: true,
                  data: val2array
                },
            ]
          };
        },

        drawHomeSaleOutPreOrderChart(){
          var data = {
              id: 'echartPie',
              value: this.outorderproportion,
              legend: ['应收余额', '收款金额'],
              color: ['#1CD8A8', '#7091C4', '#2FAEF2', '#E1CA74'],
              // tooltipShow:false,    //设置悬浮提示显示              --默认显示true
              // hoverAnimation:false, //设置鼠标悬浮点击饼图动画效果  --默认开启动画true
              // '#2FAEF2', '#1CD8A8'
          }

          /**
           * 数据处理
           */
          var seriesData = []
          data.value.forEach(function(item, index) {
            seriesData.push({
              value: item,
              name: data.legend[index]
            })
          })
          this.HomeSaleOrderParChartOption = {
            title: {
                x: '2%',
                y: '2%',
                textStyle: {
                  fontWeight: 400,
                  fontSize: 16,
                  color: '#687284'
                },
                // text: data.title || ''
            },
            tooltip: {
                trigger: 'item',
                show:  true,
                formatter: "{b}: ￥{c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                icon: 'circle',
                selectedMode: false,
                itemWidth: 6,
                itemHeight: 6,
                itemGap: 6,
                borderRadius: 6,
                bottom:'4%',
                data: data.legend
            },
            series: [{
                type: 'pie',
                // clickable:false,
                // selectedMode: 'single',//单点击设置
                hoverAnimation:  true,
                radius: ['40%', '67%'],
                color: data.color,
                label: {
                    normal: {
                        position: 'inner',
                        // formatter: '{d}',
                        formatter: function(param) {
                            if (!param.percent) return ''
                            var f = Math.round(param.percent * 10) / 10;
                            var s = f.toString();
                            var rs = s.indexOf('.');
                            if (rs < 0) {
                                rs = s.length;
                                s += '.';
                            }
                            while (s.length <= rs + 1) {
                                s += '0';
                            }
                            return s+'%';
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: seriesData
            }]
          };
        },

        saleorderclick(row){
          removePageTab({ key: '/businesshandling/saleordermanager' });
          this.$nextTick(() => {
            this.$router.push({path: '/businesshandling/saleordermanager', query: { "orderNo":row.row[0].substr(58,11)} });
          });
        },
      }
    };
  </script>
  
  <style scoped>
    .analysis-chart-card-num {
      font-size: 16px;
      font-weight: bold;
    }
  
    .analysis-chart-card-content {
      height: 60px;
      box-sizing: border-box;
      margin-bottom: 2px;
      margin-top: 6px;
      /* border: 1px red solid; */
      
    }
  
    .analysis-chart-card-text {
      padding-top: 2px;
    }
  </style>
  